

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
        <Button @click="importShop"
                type="error"
                class="float-r"
                size="large"
                icon="ios-cloud-upload-outline"
                v-perms="'bss:shop:import'">导入</Button>
        <Button @click="toExcel"
                type="warning"
                class="float-r"
                size="large"
                icon="md-cloud-download"
                style="margin-right:10px;"
                v-perms="'bss:shop:export'">导出</Button>
        <Button class="float-r"
                size="large"
                icon="md-add"
                @click="addItem"
                style="margin-right:10px;">添加</Button>
        <Poptip width="400"
                title="搜索"
                placement="bottom-end"
                style="margin-right:10px;"
                class="float-r">
          <Button type="primary"
                  size="large"
                  icon="ios-search"
                  class="float-r">搜 索</Button>
          <div style="text-align:center"
               slot="content">
            <Form ref="searchForm"
                  :model="searchForm"
                  :label-width="80"
                  value="true"
                  style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;">
              <Row>
                <Form-item label="商铺名称">
                  <Input v-model="searchForm.shopName"></Input>
                </Form-item>
                <Form-item label="所属部门">
                  <Cascader :data="deptCascaderData"
                            v-model="deptCascader"
                            :filterable="true"
                            change-on-select
                            transfer
                            placeholder="选择部门"></Cascader>
                </Form-item>
              </Row>
            </Form>
            <Row>
              <Button style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                      size="small"
                      @click="doSearchTableList">确定</Button>
              <Button style="float:right;margin-top:10px;"
                      size="small"
                      @click="resetSearch">重置</Button>
            </Row>
          </div>
        </Poptip>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table stripe
             size="small"
             :columns="tableColums"
             :data="tableData"
             :height="tableHeight"
             :loading="tableLoading"></Table>
    </Row>
    <Row>
      <Page :total="total"
            :page-size="currentPageSize"
            :current="currentPage"
            @on-change="changeCurrentPage"
            @on-page-size-change="changePageSize"
            show-total
            show-sizer
            style="float:right;margin-top:10px"></Page>
    </Row>
    <!--导入-->
    <shopImport :modalShow="importFormShow"
                @listenModalForm="hideImportModal"
                @refreshTableList="getTableList"></shopImport>
    <!--新增编辑-->
    <!-- <shopForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></shopForm> -->
    <Modal v-model="formShow"
           :title="modalFormTitle"
           :mask-closable="false"
           @on-cancel="cancel"
           :styles="{top: '50px'}"
           width="1000">
      <Tabs value="name1">
        <TabPane label="基本信息"
                 name="name1">
          <Form ref="modalForm"
                :model="modalForm"
                :label-width="120"
                value="true"
                style="padding: 3px 60px">
            <Row>
              <Col span="12">
              <Form-item label="商铺名称"
                         prop="shopName"
                         :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
                <Input v-model="modalForm.shopName"></Input>
              </Form-item>
              <Form-item label="所属场所"
                         prop="shopPlace"
                         :rules="{required: true, message: '必填', trigger:'blur',type:'number'}">
                <Select v-model="modalForm.shopPlace">
                  <Option v-for="item in placeList"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
              </Form-item>
              <Form-item label="地址"
                         prop="addr"
                         :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
                <Input v-model="modalForm.addr"></Input>
              </Form-item>

              <Form-item label="负责人姓名"
                         prop="managerName"
                         :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
                <Input v-model="modalForm.managerName"></Input>
              </Form-item>

              <Form-item label="负责人电话"
                         prop="managerMobile"
                         :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}">
                <Input v-model="modalForm.managerMobile"></Input>
              </Form-item>
              <Form-item label="所属部门"
                         prop="cascader"
                         :rules="{required: true, message: '必选', trigger:'change', type:'array'}">
                <Cascader :data="deptCascaderData"
                          v-model="modalForm.cascader"
                          :filterable="true"
                          change-on-select
                          transfer
                          placeholder="选择部门"></Cascader>
              </Form-item>
              <Form-item label="微信名称"
                         prop="wxName">
                <Input v-model="modalForm.wxName"
                       :readonly="true"></Input>
              </Form-item>
              <Form-item label="商铺平面图">
                <div class="demo-upload-list"
                     v-if="modalForm.shopMap">
                  <img :src="baseServerUrl+modalForm.shopMap" />
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline"
                          @click.native="handleImgView"></Icon>
                    <Icon type="ios-trash-outline"
                          @click.native="handleRemove"></Icon>
                  </div>
                </div>
                <Upload v-else
                        ref="upload"
                        :headers="MyHeaders"
                        :before-upload="beforeUpload"
                        :on-success="handleSuccess"
                        :format="['jpg','png']"
                        :on-format-error="handleFormatError"
                        :action="UploadAddress"
                        :data="{shopId:uploadShopId}"
                        style="display: inline-block;width:58px;    border: 1px dashed #dcdee2;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;">
                  <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera"
                          size="20"></Icon>
                  </div>
                </Upload>
                <Modal title="商铺平面图"
                       v-model="imgVisble">
                  <img :src="baseServerUrl+modalForm.shopMap"
                       v-if="imgVisble"
                       style="width: 100%">
                </Modal>
              </Form-item>
              <Form-item label="微信头像"
                         prop="wxImage">
                <img :src="modalForm.wxImage"
                     style="width:50px" />
              </Form-item>
              <Form-item label="责任书"
                         prop="dutyLetter">
                <div class="handle-img-wrapper"
                     v-if="modalForm.dutyLetter">
                  <img :src="baseServerUrl+'/'+modalForm.dutyLetter"
                       style="width:50px" />
                  <div class="img-cover">
                    <Icon type="ios-trash-outline"
                          @click.native="handleRemoveDutyLetter"></Icon>
                  </div>
                </div>
              </Form-item>
              <Form-item label="店铺照片"
                         prop="picture">
                <div class="handle-img-wrapper"
                     v-if="modalForm.picture">
                  <img :src="baseServerUrl+'/'+modalForm.picture"
                       style="width:50px" />
                  <div class="img-cover">
                    <Icon type="ios-trash-outline"
                          @click.native="handleRemovePicture"></Icon>
                  </div>
                </div>
              </Form-item>
              </Col>
              <Col span="11"
                   offset="1">
              <Input v-model="addrSearchVal"
                     element-id="tipinput">
              <span slot="prepend">请输入地址</span>
              <Button slot="append"
                      icon="ios-search"
                      @click="searchAddr"></Button>
              </Input>
              <div style="position:relative;margin-bottom:10px;margin-top:10px;">
                <div id="map-container"></div>
                <div id="mapShade"
                     :style="{'display':mapShadeShow?'block':'none'}"></div>
              </div>

              <Row>
                <Col span="10">
                <Form-item label="纬度"
                           label-width="60">
                  <Input v-model="modalForm.lat"></Input>
                </Form-item>
                </Col>
                <Col span="10">
                <Form-item label="经度"
                           label-width="60">
                  <Input v-model="modalForm.lng"></Input>
                </Form-item>
                </Col>
                <Col span="3"
                     offset="1">
                <Button type="warning"
                        :loading="modalForm_loading"
                        @click="startLocate">设置地址</Button>
                </Col>
              </Row>
              </Col>
            </Row>
          </Form>
        </TabPane>
        <TabPane label="紧急联系人"
                 name="name2">
          <div style="padding:10px 100px;">
            <Row style="padding:10px 50px;">
              <Button type="warning"
                      icon="plus-round"
                      @click="addNotifier">添加紧急联系人</Button>
            </Row>

            <Form :model="formItem"
                  :label-width="50">
              <div v-if="alarmNotifierList.length>0">
                <Row v-for="(item,index) in alarmNotifierList"
                     :key="index">
                  <Col span="12">
                  <FormItem label="姓名">
                    <Input v-model="item.name"></Input>
                  </FormItem>
                  </Col>
                  <Col span="12">
                  <FormItem label="电话">
                    <Input v-model="item.phone"></Input>
                  </FormItem>
                  </Col>
                </Row>
              </div>
            </Form>
          </div>
        </TabPane>
      </Tabs>

      <div slot="footer">
        <Button type="default"
                @click="cancel">关闭</Button>
        <Button type="primary"
                :loading="modalForm_loading"
                @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
    <!--是否删除框-->
    <Modal v-model="delModal"
           width="360">
      <p slot="header"
         style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error"
                size="large"
                long
                :loading="btnLoading"
                @click="comfirmDel">删除</Button>
      </div>
    </Modal>
    <Modal :title="imgTitle"
           v-model="visible">
      <img :src="dutypath"
           v-if="visible"
           style="width: 100%">
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import {
  getShopPagedList,
  delShop,
  getShopListExcel,
  saveShop,
  updateShop
} from '@/api/asset'
import { getDeptCascader } from '@/api/system'
import config from '@/config'
import { getShopPlace } from '@/libs/smoketool.js'
import AMap from 'AMap'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
// import shopForm from './shopForm.vue'
import shopImport from './shopImport.vue'
export default {
  name: 'shopsManager',
  components: {
    // shopForm,
    shopImport
  },
  data() {
    return {
      tableColums: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'center'
        },
        {
          align: 'center',
          title: '商铺名称',
          width: 140,
          key: 'shopName'
        },
        {
          align: 'center',
          title: '所属场所',
          width: 140,
          key: 'shopPlace',
          render: (h, params) => {
            const row = params.row
            let name = getShopPlace(row.shopPlace)

            return h(
              'Tag',
              {
                props: {
                  color: 'cyan'
                }
              },
              name
            )
          }
        },
        {
          align: 'center',
          title: '所属部门',
          key: 'depName'
        },
        {
          align: 'center',
          title: '地址',
          minWidth: 100,
          key: 'addr'
        },
        {
          align: 'center',
          title: '设备数量',
          key: 'devCount'
        },
        {
          align: 'center',
          title: '联系电话',
          width: 120,
          key: 'managerMobile'
        },
        {
          align: 'center',
          title: '联系人',
          key: 'managerName'
        },
        {
          align: 'center',
          title: '微信名称',
          key: 'wxName'
        },
        {
          align: 'center',
          title: '微信头像',
          key: 'wxImage',
          render: (h, params) => {
            let imgUrl = params.row.wxImage
            if (!imgUrl) {
              return ''
            }
            return h('img', {
              attrs: {
                src: imgUrl
              },
              style: {
                width: '30px',
                height: '30px'
              }
            })
          }
        },
        {
          align: 'center',
          title: '平面图',
          key: 'shopMap',
          render: (h, params) => {
            let imgUrl = params.row.shopMap
            if (!imgUrl) {
              return ''
            } else {
              imgUrl = baseUrl + imgUrl
            }
            return h('img', {
              attrs: {
                src: imgUrl
              },
              style: {
                width: '30px',
                height: '30px'
              }
            })
          }
        },
        {
          align: 'center',
          title: '责任书',
          minWidth: 80,
          key: 'dutyLetter',
          render: (h, params) => {
            let imgSrc = params.row.dutyLetter
            if (imgSrc) {
              imgSrc = baseUrl + imgSrc
              return h('img', {
                attrs: {
                  src: imgSrc
                },
                on: {
                  click: () => {
                    this.handleView(imgSrc, '责任书')
                  }
                },
                style: {
                  width: '30px',
                  height: '30px'
                }
              })
            }
          }
        },
        {
          align: 'center',
          title: '商铺图片',
          key: 'picture',
          render: (h, params) => {
            let imgSrc = params.row.picture
            if (imgSrc) {
              imgSrc = baseUrl + imgSrc
              return h('img', {
                attrs: {
                  src: imgSrc
                },
                on: {
                  click: () => {
                    this.handleView(imgSrc, '商铺图片')
                  }
                },
                style: {
                  width: '30px',
                  height: '30px'
                }
              })
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let actions = []

            actions.push(
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  directives: [
                    {
                      name: 'perms',
                      value: 'bss:shop:update'
                    }
                  ],
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.row)
                    }
                  }
                },
                '修改'
              )
            )

            actions.push(
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  directives: [
                    {
                      name: 'perms',
                      value: 'bss:shop:delete'
                    }
                  ],
                  on: {
                    click: () => {
                      this.delItem(params.row.shopId)
                    }
                  }
                },
                '删除'
              )
            )

            return h('div', actions)
          }
        }
      ],
      areaGcData: [],
      deptCascaderData: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      currentPageSize: 10,
      tableLoading: false,
      formShow: false,
      formTitle: '添加商铺',
      parentForm: {
        id: '',
        name: '',
        addr: '',
        managerName: '',
        managerMobile: '',
        dutyLetter: '',
        lat: '',
        lng: ''
      },
      dutypath: '',
      delModal: false,
      delId: '', //删除的Id
      btnLoading: false,
      searchForm: {
        shopName: '',
        size: 10,
        current: 1,

        deptId: 0
      },
      deptCascader: [],
      visible: false,
      shopTableShow: false,
      groupCompanyId: 0,
      departmentId: 0,
      shopTableTitle: '',
      tableHeight: window.innerHeight - 300,
      importFormShow: false,
      imgVisble: false,
      imgTitle: '', //table里面查看图片
      uploadShopId: 0,
      IsUploading: false,
      modalForm: {},
      modalForm_loading: false,
      deptCascader: [],
      baseServerUrl: baseUrl,
      map: null,
      mousetool: null,
      mapShadeShow: false,
      addrSearchVal: '',
      alarmNotifierList: [],
      placeList: [
        {
          value: 1,
          label: '学校'
        },
        {
          value: 2,
          label: '医院/诊所'
        },
        {
          value: 3,
          label: '商店/超市'
        },
        {
          value: 4,
          label: '餐饮场所'
        },
        {
          value: 5,
          label: '宾馆/旅馆'
        },
        {
          value: 6,
          label: '娱乐/休闲场所'
        },
        {
          value: 7,
          label: '网吧'
        },
        {
          value: 8,
          label: '美容/美发/洗浴场所'
        },
        {
          value: 9,
          label: '生产/加工企业'
        },
        {
          value: 11,
          label: '消防栓'
        },
        {
          value: 12,
          label: '微型消防站'
        },
        {
          value: 13,
          label: '医疗服务站'
        },
        {
          value: 14,
          label: '消防支队'
        },
        {
          value: 10,
          label: '其他'
        }
      ]
    }
  },
  computed: {
    MyHeaders: function() {
      let myHeaders = {}
      let tokenValue = sessionStorage.getItem('token')
      if (tokenValue) {
        myHeaders.token = tokenValue
      }
      return myHeaders
    },
    UploadAddress: function() {
      return baseUrl + '/bss/shop/shop_map'
    }
  },
  watch: {
    formShow(curVal, oldVal) {
      if (curVal) {
        this.modalForm = JSON.parse(JSON.stringify(this.parentForm))
        if (this.parentForm.cascader) {
          this.modalForm.cascader = this.parentForm.cascader
            .split(',')
            .map(function(item) {
              return parseInt(item)
            })
        } else {
          this.modalForm.cascader = []
        }
        this.addrSearchVal = ''

        this.addMarker(this.modalForm.lng, this.modalForm.lat)

        if (this.modalForm.alarmNotifier) {
          let alarmNotifier = this.modalForm.alarmNotifier
          let notifierArr = []
          alarmNotifier.split('|').forEach(item => {
            let name = item.split(',')[0]
            let phone = item.split(',')[1]
            notifierArr.push({ name: name, phone, phone })
          })
          this.alarmNotifierList = notifierArr
        } else {
          this.alarmNotifierList = []
        }
        console.log(this.modalForm)
        this.uploadShopId = this.modalForm.shopId
      }
    }
  },
  created() {
    this.getDeptCascaderList()
  },
  mounted() {
    this.getTableList()
    this.initMap()
    const vm = this
    window.onresize = () => {
      return (() => {
        vm.tableHeight = window.innerHeight - 300
      })()
    }
  },
  methods: {
    resetSearch() {
      this.searchForm.shopName = ''
      this.deptCascader = []
    },
    doSearchTableList() {
      this.currentPage = 1
      this.getTableList()
    },
    async toExcel() {
      this.tableLoading = true
      const params = this.searchForm
      const res = await getShopListExcel(params)
      this.tableLoading = false
      if (res.code == 0) {
        const url = baseUrl + res.data
        window.open(url)
      } else {
        this.$Message.error(res.msg)
      }
    },
    async getTableList() {
      this.tableLoading = true
      this.searchForm.current = this.currentPage
      this.searchForm.size = this.currentPageSize
      if (this.deptCascader.length < 1) {
        this.searchForm.deptId = 0
      } else {
        var arr = this.deptCascader
        this.searchForm.deptId = arr[arr.length - 1]
      }
      const params = this.searchForm
      const result = await getShopPagedList(params)
      if (result.code == 0) {
        let res = result.data
        this.total = res.total
        this.tableData = res.records
      }
      this.tableLoading = false
    },
    changeCurrentPage(num) {
      this.currentPage = num
      this.getTableList()
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize
      this.getTableList()
    },
    addItem() {
      Object.keys(this.parentForm).forEach(key => (this.parentForm[key] = ''))
      this.formTitle = '添加商铺'
      this.formShow = true
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row))
      this.formTitle = '修改商铺'
      this.formShow = true
    },
    delItem(Id) {
      this.delId = Id
      this.delModal = true
    },
    async comfirmDel() {
      this.btnLoading = true

      try {
        const res = await delShop(this.delId)
        if (res.code == 0) {
          this.getTableList()
          this.delModal = false
        }
      } catch (err) {
        console.log(err)
        this.$Message.error('服务器异常，稍后再试')
      }
      this.btnLoading = false
    },
    hideModel() {
      this.formShow = false
    },
    manageItem(row) {
      this.groupCompanyId = row.id
      this.departmentId = row.departmentId
      this.shopTableTitle = `[${row.groupName}]-子单位列表`
      this.shopTableShow = true
    },
    hideshopTable() {
      this.shopTableShow = false
    },
    async getDeptCascaderList() {
      let res = await getDeptCascader()
      if (res.code == 0) {
        this.deptCascaderData = res.data
      }
    },
    handleView(img, title) {
      this.dutypath = img
      this.imgTitle = title
      this.visible = true
    },
    importShop() {
      this.importFormShow = true
    },
    hideImportModal() {
      this.importFormShow = false
    },
    beforeUpload() {
      this.IsUploading = true
    },
    handleSuccess(res, file) {
      this.IsUploading = false
      let result = res
      if (res.code == 0) {
        this.$Message.success('上传成功！')
        this.$emit('refreshTableList')
        this.modalForm.shopMap = res.data
      } else {
        this.$Message.error(res.msg)
      }

      console.log(result)
    },
    handleFormatError(file) {
      this.IsUploading = false
      this.$Notice.warning({
        title: '文件格式不对',
        desc: '上传文件格式不正确，请上传xls或xlsx格式的excel'
      })
    },
    handleImgView() {
      this.imgVisble = true
    },
    handleRemove() {
      this.modalForm.shopMap = ''
    },
    cancel() {
      this.$emit('listenModalForm')
    },
    async getDeptCascader() {
      let res = await getDeptCascader()
      if (res.code == 0) {
        this.deptCascader = res.data
      }
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true
          let params = JSON.parse(JSON.stringify(this.modalForm))
          let arr = this.modalForm.cascader
          params.deptId = arr[arr.length - 1]
          params.cascader = arr.join(',')
          if (this.alarmNotifierList.length > 0) {
            params.alarmNotifier = this.alarmNotifierList
              .filter(val => val.name && val.phone)
              .map(item => {
                return item.name + ',' + item.phone
              })
              .join('|')
          }
          try {
            let result
            if (params.shopId) {
              result = await updateShop(params)
            } else {
              result = await saveShop(params)
            }

            if (result.code == 0) {
              this.$Message.success('提交成功!')
              this.formShow = false
              this.getTableList()
              // this.$emit('listenModalForm')
              // this.$emit('refreshTableList')
            } else {
              this.$Message.error(result.msg)
            }
          } catch (err) {
            console.log(err)
            this.$Message.error('服务器异常，稍后再试')
          }
          this.modalForm_loading = false
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    initMap() {
      var _this = this
      this.map = new AMap.Map('map-container', {
        resizeEnable: true,
        scrollWheel: true,
        zoom: 18
      })

      this.map.plugin(['AMap.MouseTool'], function() {
        //鼠标工具插件
        _this.mousetool = new AMap.MouseTool(_this.map)
      })

      AMap.event.addListener(_this.mousetool, 'draw', function(e) {
        var drawObj = e.obj
        var point = drawObj.getPosition()
        _this.modalForm.lat = point.lat
        _this.modalForm.lng = point.lng
        _this.mapShadeShow = false
        _this.mapShadeShow = false
        _this.mousetool.close(false)
      })

      AMap.plugin('AMap.Autocomplete', function() {
        // 实例化Autocomplete
        var autoOptions = {
          // input 为绑定输入提示功能的input的DOM ID
          input: 'tipinput'
        }
        var autoComplete = new AMap.Autocomplete(autoOptions)
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
        AMap.event.addListener(autoComplete, 'select', function(data) {
          //TODO 选择后的处理程序，data的格式见 附录
          console.log(data)
          if (data.poi.address.length > 0) {
            _this.addrSearchVal =
              data.poi.district + data.poi.address + data.poi.name
          } else {
            _this.addrSearchVal = data.poi.district + data.poi.name
          }
          let location = data.poi.location
          if (location) {
            _this.addMarker(location.lng, location.lat)
            _this.modalForm.lat = location.lat
            _this.modalForm.lng = location.lng
          }
        })
      })
    },
    searchAddr() {
      var addr = this.addrSearchVal
      let _this = this
      AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        })

        geocoder.getLocation(addr, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            var location = result.geocodes[0].location
            try {
              if (location) {
                _this.addMarker(location.lng, location.lat)
                _this.modalForm.lat = location.lat
                _this.modalForm.lng = location.lng
              } else {
                _this.$Message.error('未查询到地理信息!')
              }
            } catch (error) {
              _this.$Message.error('查询地理信息失败,请检查网络!')
            }
          } else {
            _this.$Message.error('未查询到地理信息!')
          }
        })
      })
    },
    addMarker(lng, lat) {
      this.map.clearMap()
      if (lat && lng) {
        var marker = new AMap.Marker({
          position: [lng, lat]
        })
        marker.setMap(this.map)
        this.map.setFitView()
      }
    },
    startLocate() {
      this.map.clearMap()
      this.mapShadeShow = true
      this.mousetool.marker({ offset: new AMap.Pixel(-14, -11) })
    },
    addNotifier() {
      if (this.alarmNotifierList.length < 8) {
        this.alarmNotifierList.push({ name: '', phone: '' })
      }
    },
    handleRemoveDutyLetter() {
      this.modalForm.dutyLetter = ''
    },
    handleRemovePicture() {
      this.modalForm.picture = ''
    }
  }
}
</script>
<style lang="less">
.amap-sug-result {
  z-index: 99999;
}
#map-container {
  width: 100%;
  height: 380px;
}
#mapShade {
  width: 100%;
  height: 380px;
  background-color: #000000;
  position: absolute;
  opacity: 0.35;
  left: 0;
  top: 0;
  z-index: 100;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
}

.handle-img-wrapper {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.img-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.handle-img-wrapper:hover .img-cover {
  display: block;
}
.handle-img-wrapper i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
